<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天选之人 - 随机选择游戏</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4F46E5',
                        secondary: '#10B981',
                        accent: '#F59E0B',
                        light: '#F9FAFB',
                        dark: '#1F2937'
                    }
                }
            }
        }
    </script>
    
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .cell-transition {
                transition: all 0.25s ease-in-out;
            }
            .pulse-animation {
                animation: pulse 1.5s infinite;
            }
            .shake-animation {
                animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) infinite;
            }
            .bounce-in {
                animation: bounce-in 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            }
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }
        
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            20% { transform: translateX(-5px); }
            40% { transform: translateX(5px); }
            60% { transform: translateX(-3px); }
            80% { transform: translateX(3px); }
        }
        
        @keyframes bounce-in {
            0% { transform: scale(0.9); opacity: 0.7; }
            70% { transform: scale(1.05); }
            100% { transform: scale(1); opacity: 1; }
        }
    </style>
    
    <style>
        body {
            background-color: #F3F4F6;
            background-image: 
                radial-gradient(circle at 10% 20%, rgba(79, 70, 229, 0.05) 0%, transparent 20%),
                radial-gradient(circle at 90% 80%, rgba(16, 185, 129, 0.05) 0%, transparent 20%);
        }
        
        /* 自定义滚动条 */
        ::-webkit-scrollbar {
            width: 6px;
        }
        
        ::-webkit-scrollbar-track {
            background: #F1F5F9;
            border-radius: 10px;
        }
        
        ::-webkit-scrollbar-thumb {
            background: #CBD5E1;
            border-radius: 10px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: #94A3B8;
        }
    </style>
</head>
<body class="min-h-screen font-sans text-dark p-4">
    <div class="max-w-md mx-auto">
        <!-- 游戏标题 -->
        <h1 class="text-[clamp(1.6rem,6vw,2.2rem)] font-bold text-center my-4 text-primary">
            天选之人
            <i class="fa fa-star text-accent ml-1"></i>
        </h1>
        
        <!-- 设置面板 (高度优化) -->
        <div id="settingsPanel" class="bg-white rounded-xl p-4 mb-4 shadow-sm border border-gray-100">
            <h2 class="text-lg font-semibold text-center mb-3">游戏设置</h2>
            
            <!-- 总人数设置 -->
            <div class="mb-2">
                <div class="flex justify-between items-center mb-1">
                    <label class="text-sm text-gray-600">总人数 (2-15)</label>
                    <span id="totalCount" class="text-primary font-bold">8</span>
                </div>
                <input 
                    type="range" 
                    id="totalSlider" 
                    min="2" 
                    max="15" 
                    value="8" 
                    class="w-full h-2 bg-gray-100 rounded-lg appearance-none cursor-pointer accent-primary"
                >
            </div>
            
            <!-- 天选人数设置 -->
            <div class="mb-3">
                <div class="flex justify-between items-center mb-1">
                    <label class="text-sm text-gray-600">天选人数</label>
                    <span id="chosenCount" class="text-secondary font-bold">3</span>
                </div>
                <input 
                    type="range" 
                    id="chosenSlider" 
                    min="1" 
                    max="7" 
                    value="3" 
                    class="w-full h-2 bg-gray-100 rounded-lg appearance-none cursor-pointer accent-secondary"
                >
            </div>
            
            <button id="startBtn" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-2.5 px-4 rounded-lg transition-colors">
                开始游戏 <i class="fa fa-play ml-1"></i>
            </button>
        </div>
        
        <!-- 游戏区域 -->
        <div id="gameArea" class="hidden">
            <!-- 游戏信息 -->
            <div class="flex justify-between bg-white rounded-lg p-2.5 mb-3 shadow-sm text-sm">
                <div class="flex items-center">
                    <i class="fa fa-users text-primary mr-1.5"></i>
                    <span>总: <span id="gameTotal" class="font-bold">8</span></span>
                </div>
                <div class="flex items-center">
                    <i class="fa fa-trophy text-secondary mr-1.5"></i>
                    <span>选: <span id="gameChosen" class="font-bold">3</span></span>
                </div>
            </div>
            
            <!-- 格子容器 -->
            <div id="gridContainer" class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-2.5 mb-4">
                <!-- 格子将通过JS动态生成 -->
            </div>
            
            <!-- 控制按钮 -->
            <div class="flex gap-2.5 mb-6">
                <button id="playBtn" class="flex-1 bg-primary text-white font-medium py-2.5 px-4 rounded-lg shadow-sm hover:bg-primary/90 transition-colors">
                    <i class="fa fa-random mr-1"></i> 开始
                </button>
                <button id="stopBtn" class="flex-1 bg-secondary text-white font-medium py-2.5 px-4 rounded-lg shadow-sm hover:bg-secondary/90 transition-colors" disabled>
                    <i class="fa fa-stop mr-1"></i> 停止
                </button>
                <button id="resetBtn" class="w-12 bg-gray-100 text-gray-700 font-medium py-2.5 rounded-lg shadow-sm hover:bg-gray-200 transition-colors">
                    <i class="fa fa-refresh"></i>
                </button>
            </div>
        </div>
        
        <!-- 底部留白，确保可滚动 -->
        <div class="h-8"></div>
    </div>

    <script>
        class ChosenPersonGame {
            constructor() {
                // DOM元素
                this.settingsPanel = document.getElementById('settingsPanel');
                this.gameArea = document.getElementById('gameArea');
                this.totalSlider = document.getElementById('totalSlider');
                this.totalCount = document.getElementById('totalCount');
                this.chosenSlider = document.getElementById('chosenSlider');
                this.chosenCount = document.getElementById('chosenCount');
                this.startBtn = document.getElementById('startBtn');
                this.gridContainer = document.getElementById('gridContainer');
                this.playBtn = document.getElementById('playBtn');
                this.stopBtn = document.getElementById('stopBtn');
                this.resetBtn = document.getElementById('resetBtn');
                this.gameTotal = document.getElementById('gameTotal');
                this.gameChosen = document.getElementById('gameChosen');
                
                // 游戏状态
                this.totalPeople = 8;
                this.chosenPeople = 3;
                this.isPlaying = false;
                this.interval = null;
                
                // 颜色数组
                this.colors = [
                    '#4F46E5', '#10B981', '#F59E0B', '#EF4444', 
                    '#EC4899', '#3B82F6', '#8B5CF6', '#14B8A6'
                ];
                
                // 初始化事件监听
                this.initEventListeners();
            }
            
            // 初始化事件监听
            initEventListeners() {
                // 总人数滑块
                this.totalSlider.addEventListener('input', (e) => {
                    const value = parseInt(e.target.value);
                    this.totalPeople = value;
                    this.totalCount.textContent = value;
                    
                    // 确保天选人数不超过总人数-1
                    if (this.chosenPeople >= this.totalPeople) {
                        this.chosenPeople = this.totalPeople - 1;
                        this.chosenSlider.value = this.chosenPeople;
                        this.chosenCount.textContent = this.chosenPeople;
                    }
                    
                    // 更新天选人数滑块最大值
                    this.chosenSlider.max = this.totalPeople - 1;
                });
                
                // 天选人数滑块
                this.chosenSlider.addEventListener('input', (e) => {
                    const value = parseInt(e.target.value);
                    this.chosenPeople = value;
                    this.chosenCount.textContent = value;
                });
                
                // 开始游戏按钮
                this.startBtn.addEventListener('click', () => this.enterGame());
                
                // 开始选择按钮
                this.playBtn.addEventListener('click', () => this.startSelection());
                
                // 停止选择按钮
                this.stopBtn.addEventListener('click', () => this.stopSelection());
                
                // 重置按钮
                this.resetBtn.addEventListener('click', () => this.resetGame());
                
                // 键盘控制
                document.addEventListener('keydown', (e) => {
                    if (e.code === 'Space' && !this.gameArea.classList.contains('hidden')) {
                        e.preventDefault();
                        this.isPlaying ? this.stopSelection() : this.startSelection();
                    }
                });
            }
            
            // 进入游戏界面
            enterGame() {
                // 更新游戏信息
                this.gameTotal.textContent = this.totalPeople;
                this.gameChosen.textContent = this.chosenPeople;
                
                // 生成格子
                this.generateGrid();
                
                // 切换界面
                this.settingsPanel.classList.add('hidden');
                this.gameArea.classList.remove('hidden');
                
                // 滚动到游戏区域
                this.gameArea.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }
            
            // 生成格子
            generateGrid() {
                this.gridContainer.innerHTML = '';
                
                // 根据数量调整列数
                let columns = 3;
                if (this.totalPeople > 10) columns = 5;
                else if (this.totalPeople > 6) columns = 4;
                
                this.gridContainer.style.gridTemplateColumns = `repeat(${columns}, 1fr)`;
                
                // 创建格子
                for (let i = 0; i < this.totalPeople; i++) {
                    const cell = document.createElement('div');
                    cell.className = 'bg-white rounded-xl aspect-square flex items-center justify-center text-lg font-bold border border-gray-200 shadow-sm cell-transition bounce-in';
                    cell.style.animationDelay = `${i * 0.05}s`;
                    cell.dataset.index = i;
                    cell.innerHTML = `<span>${i + 1}</span>`;
                    this.gridContainer.appendChild(cell);
                }
            }
            
            // 开始选择动画
            startSelection() {
                if (this.isPlaying) return;
                
                this.isPlaying = true;
                this.playBtn.disabled = true;
                this.playBtn.classList.add('opacity-60', 'cursor-not-allowed');
                this.stopBtn.disabled = false;
                this.stopBtn.classList.remove('opacity-60', 'cursor-not-allowed');
                
                const cells = this.gridContainer.querySelectorAll('div');
                let speed = 150; // 初始速度
                let step = 0;
                
                // 开始动画循环
                this.interval = setInterval(() => {
                    // 逐渐加速
                    if (step % 10 === 0 && speed > 60) {
                        speed -= 5;
                        clearInterval(this.interval);
                        this.interval = setInterval(update, speed);
                    }
                    
                    update();
                    step++;
                }, speed);
                
                // 更新格子颜色的函数
                const update = () => {
                    cells.forEach(cell => {
                        // 随机决定是否高亮
                        if (Math.random() > 0.6) {
                            const color = this.colors[Math.floor(Math.random() * this.colors.length)];
                            cell.style.backgroundColor = color;
                            cell.style.color = 'white';
                            cell.style.transform = `scale(1.05)`;
                        } else {
                            cell.style.backgroundColor = 'white';
                            cell.style.color = '#1F2937';
                            cell.style.transform = `scale(1)`;
                        }
                    });
                };
            }
            
            // 停止选择并显示结果
            stopSelection() {
                if (!this.isPlaying) return;
                
                clearInterval(this.interval);
                this.isPlaying = false;
                this.playBtn.disabled = false;
                this.playBtn.classList.remove('opacity-60', 'cursor-not-allowed');
                this.stopBtn.disabled = true;
                this.stopBtn.classList.add('opacity-60', 'cursor-not-allowed');
                
                const cells = Array.from(this.gridContainer.querySelectorAll('div'));
                
                // 随机选择天选之人
                const shuffled = [...cells].sort(() => 0.5 - Math.random());
                const chosen = shuffled.slice(0, this.chosenPeople);
                
                // 重置所有格子
                cells.forEach(cell => {
                    cell.style.backgroundColor = 'white';
                    cell.style.color = '#1F2937';
                    cell.style.transform = 'scale(1)';
                    cell.classList.remove('pulse-animation');
                });
                
                // 高亮显示选中的格子
                chosen.forEach((cell, index) => {
                    const color = this.colors[index % this.colors.length];
                    cell.style.backgroundColor = color;
                    cell.style.color = 'white';
                    cell.classList.add('pulse-animation');
                    
                    // 添加选中动画
                    setTimeout(() => {
                        cell.style.transform = 'scale(1.1)';
                        setTimeout(() => cell.style.transform = 'scale(1)', 300);
                    }, index * 200);
                });
            }
            
            // 重置游戏
            resetGame() {
                clearInterval(this.interval);
                this.isPlaying = false;
                this.playBtn.disabled = false;
                this.playBtn.classList.remove('opacity-60', 'cursor-not-allowed');
                this.stopBtn.disabled = true;
                this.stopBtn.classList.add('opacity-60', 'cursor-not-allowed');
                
                // 切换回设置界面
                this.gameArea.classList.add('hidden');
                this.settingsPanel.classList.remove('hidden');
                
                // 滚动到设置面板
                this.settingsPanel.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }
        }
        
        // 初始化游戏
        window.addEventListener('load', () => {
            const game = new ChosenPersonGame();
        });
    </script>
</body>
</html>
